<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="main">
                    <div class="outcontainer_right">
                        <div class="content">
                            <el-row :gutter="40" style="height: 40px;">
                                <el-col :span="16" style="height: 40px;">
                                    <label style="font-weight: normal;font-size:14px">导出类型:</label>
                                    <el-select v-model="hostType"  placeholder="请选择" size="small" style="width:150px;margin-top:12px;margin-left: 5px;margin-right: 5px;" @change="changeShow()">
                                        <el-option label="设备类型" value="0"></el-option>
                                        <el-option label="业务类型" value="1"></el-option>
                                    </el-select>
                                    <el-button type="primary" size="small" style="margin-left:5px" @click="exportClick()">点击导出</el-button>
                                </el-col>
                            </el-row>
                            <br>
                            <div class="table_info">
                                <el-table
                                        v-loading="isLoading"
                                        v-show="isShow"
                                        :data="tableData"
                                        border
                                        >
                                    <el-table-column
                                            prop="type"
                                            label="设备分类名称"
                                            min-width="25%">
                                        <template slot-scope="scope">
                                            {{ scope.row.type }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="count_sum"
                                            label="资源总数"
                                            min-width="25%">
                                        <template slot-scope="scope">
                                            {{ scope.row.count_sum }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="count_avail"
                                            label="可用数量"
                                            min-width="25%">
                                        <template slot-scope="scope">
                                            {{ scope.row.count_avail }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="count_unavail"
                                            label="不可用数量"
                                            min-width="25%">
                                        <template slot-scope="scope">
                                            {{ scope.row.count_unavail }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>

                            <div class="table_info">
                                <el-table
                                        v-loading="isLoading"
                                        v-show="isShow2"
                                        :data="tableData"
                                        border
                                >
                                    <el-table-column
                                            prop="name"
                                            label="业务名称"
                                            min-width="25%">
                                        <template slot-scope="scope">
                                            {{ scope.row.name }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="num"
                                            label="资源总数"
                                            min-width="25%">
                                        <template slot-scope="scope">
                                            {{ scope.row.num }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="num1"
                                            label="设备资源"
                                            min-width="25%">
                                        <template slot-scope="scope">
                                            {{ scope.row.num1 }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="num2"
                                            label="数据库资源"
                                            min-width="25%">
                                        <template slot-scope="scope">
                                            {{ scope.row.num2 }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-main>
                <vFootSpace />
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import axios from 'axios'
    import table from "../../mixins/table";
    export default {
        name: 'PerformanceExcel',
        data() {
            return {
                hostType: "0",
                name: '',
                isShow:false,
                isShow2:false,
                isLoading:false,
                tableData: [],
            }
        },
        methods:{
            changeShow(){
                this.isLoading = true
                if (this.hostType == 0){
                    this.isShow2 = false
                    this.isShow = true
                }else {
                    this.isShow = false
                    this.isShow2 = true
                }

                this.$axios.get('report/statistics_charts.action', {
                    params: {
                        hostType: this.hostType
                    }
                }).then((res) => {
                    this.tableData = res.data.content.result;
                    this.isLoading = false
                })
            },
            exportClick() {
                this.$confirm('此操作将导出该条件下的所有数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        method: "post",
                        url: '/report/export_statistics_excel_new.action',
                        data: {
                            hostType: this.hostType,
                        },
                        crossOrigin: true,
                        crossDomain: true,
                        responseType: 'blob',
                    }).then((response) => {
                        const link = document.createElement('a')
                        let blob = new Blob([response.data], {type: 'application/vnd.ms-excel'})
                        link.style.display = 'none'
                        link.href = URL.createObjectURL(blob)
                        let fileName = "资源统计报表"
                        if (this.hostType == 1){
                            fileName = "业务统计报表"
                        }
                        link.download = fileName
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }).catch((error) => {
                        console.log(error);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消导出'
                    });
                });
            },
        },
        mounted(){
            this.changeShow();
        },
    }
</script>
<style scoped>
    .main{
        height: 88vh;
        width: 100%;
        margin-top: 60px;
        padding:10px;
    }
    .outcontainer_right{
        height: 100%;
        overflow-x:hidden
    }
    .content{
        margin-top: 0;
        width: 100%;
        height: 97%;
        overflow-x:hidden
    }
    #hostsetting {
        height: 100%;
        width: 100%;
        background-color: #F0F2F5;
        position: absolute;
    }
    .itemInfo-middle-type div{
        display: inline;
        padding-left: 5px;
        padding-right: 5px;
        height: 30px;
        line-height: 50px;
        color: #d9d9d9;
        border-top: 1px solid #d9d9d9;
        border-left: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }
</style>
